<template>
  <div class="company">
    <div class="top">
      <van-row>
        <van-col span="3"><span class="myname">公司</span></van-col>
        <van-col span="21"
          ><van-search
            v-model="myvalue"
            shape="round"
            placeholder="请输入搜索关键字"
        /></van-col>
      </van-row>
    </div>
    <!-- 轮播图 -->
    <van-swipe
      span="24"
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item>
        <img src="../../assets/company/img_banner@2x.png" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="../../assets/company/wangzhaojun.jpg"
          alt=""
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="../../assets/company/diaochan.jpg"
          alt=""
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="../../assets/company/luna.webp"
          alt=""
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="../../assets/company/shangguanxiuer.jpg"
          alt=""
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 导航栏 -->
    <van-row>
      <van-col span="5"><van-button>推荐</van-button></van-col>
      <van-col span="5"
        ><van-button
          icon-position="right"
          :icon="far ? 'arrow-up' : 'arrow-down'"
       :class="{ iconcolor: far || near}"
          >距离</van-button
        ></van-col
      >
      <van-col span="5"
        ><van-button
          icon-position="right"
          :icon="four || three ? 'arrow-up' : 'arrow-down'"
            :class="{ iconcolor: four || three || two || one ||zero}"
          >评分</van-button
        ></van-col
      >
      <van-col span="9">
        <!-- 筛选 -->
        <van-dropdown-menu>
          <van-dropdown-item title="筛选" ref="item">
            <van-cell center title="距离"></van-cell>
            <van-cell center>
              <van-row type="flex" justify="center" gutter="22">
                <van-col span="11" center
                  ><button :class="{ active: far }" @click="farbtn">
                    由远及近
                  </button></van-col
                >
                <van-col span="11"
                  ><button :class="{ active: near }" @click="nearbtn">
                    由近及远
                  </button></van-col
                >
              </van-row>
            </van-cell>
            <van-cell center title="评分"></van-cell>
            <van-cell center>
              <van-row type="flex" justify="center" gutter="22">
                <van-col span="11" center
                  ><button :class="{ active: four }" @click="fourbtn">
                    4分-5分
                  </button></van-col
                >
                <van-col span="11"
                  ><button :class="{ active: three }" @click="threebtn">
                    3分-3.9分
                  </button></van-col
                >
              </van-row>
            </van-cell>
            <van-cell center>
              <van-row type="flex" justify="center" gutter="22">
                <van-col span="11" center
                  ><button :class="{ active: two }" @click="twobtn">
                    2分-2.9分
                  </button></van-col
                >
                <van-col span="11"
                  ><button :class="{ active: one }" @click="onebtn">
                    1分-1.9分
                  </button></van-col
                >
              </van-row>
            </van-cell>
            <van-cell center>
              <van-row type="flex" justify="center" gutter="22">
                <van-col span="11" center
                  ><button :class="{ active: zero }" @click="zerobtn">
                    1分以下
                  </button></van-col
                >
                <van-col span="11"></van-col>
              </van-row>
            </van-cell>
            <van-cell center>
              <van-row type="flex" justify="center" gutter="22" class="btn">
                <van-col span="8"
                  ><button @click="clearbtn">清除</button></van-col
                >
                <van-col span="14"
                  ><button @click="onConfirm">确认</button></van-col
                >
              </van-row>
            </van-cell>
          </van-dropdown-item>
        </van-dropdown-menu>
      </van-col>
    </van-row>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="别拉了,木有啦!"
        @load="onLoad"
      >
        <div
          class="box"
          v-for="(item, index) in list"
          :key="index"
          :title="item"
        >
          <van-card
            :desc="item.distance"
            :title="item.name"
            :thumb="'http://localhost:1337' + item.logo"
          >
            <template #tags>
              <van-tag color="#eee" type="default">{{ item.type }}</van-tag>
              <van-tag color="#eee" type="default">{{ item.step }}</van-tag>
              <van-tag color="#eee" type="default">{{ item.scale }}</van-tag>
            </template>
            <template #footer>
              <p class="tagjob">
                在招职位：<span class="number">{{ item.positions }}</span> /
                最后更新时间：<span>{{ item.updated_at | fromNow }}</span>
              </p>
            </template>
          </van-card>
          <span class="grade">{{ item.score }}分</span>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 导入接口
import { companiesListApi } from "@/api/company.js";
//导入moment
import moment from "moment";
//设置语言
moment.locale("zh-cn");
// import { getToken } from '@/utils/token.js'
export default {
  name: "company",
  data() {
    return {
      far: false,
      near: false,
      four: false,
      three: false,
      two: false,
      one: false,
      zero: false,
      myvalue: "",
      switch1: false,
      switch2: false,                
      list: [], //列表
      loading: false, //加载状态 触底后自动变成true，此时执行onload逻辑
      finished: false, //是否加载完毕 false 继续加载 true触底后不会再加载
      refreshing: false, //下拉刷新 用户下拉后这个值自动为true
    };
  },
  methods: {
    farbtn() {
      (this.far = true), (this.near = false);
    },
    nearbtn() {
      (this.near = true), (this.far = false);
    },
    fourbtn() {
      (this.four = true), (this.three = false);
      this.two = false;
      this.one = false;
      this.zero = false;
    },
    threebtn() {
      (this.four = false), (this.three = true);
      this.two = false;
      this.one = false;
      this.zero = false;
    },
    twobtn() {
      (this.four = false), (this.three = false);
      this.two = true;
      this.one = false;
      this.zero = false;
    },
    onebtn() {
      (this.four = false), (this.three = false);
      this.two = false;
      this.one = true;
      this.zero = false;
    },
    zerobtn() {
      (this.four = false), (this.three = false);
      this.two = false;
      this.one = false;
      this.zero = true;
    },
    clearbtn() {
      (this.far = false), (this.near = false);
      (this.four = false), (this.three = false);
      this.two = false;
      this.one = false;
      this.zero = false;
    },
    onConfirm() {
      this.$refs.item.toggle();
    },
    async onLoad() {
      const res = await companiesListApi({
        limit: 5,
      });

      this.list.push(...res.data.data.list);
      //  console.log(res);
      // 2.加载状态结束
      this.loading = false;
      // 3.数据全部加载完成
      if (this.list.length >= 100) {
        this.finished = true;
      }
    },
    onRefresh() {
      //0.一旦下拉刷新，无条件的设置finished为false(保证刷新之后可以正常上拉加载更多)
      this.finished = false;
      //1.先清空旧数据
      this.list = [];
      //2.设置上拉加载更多状态为true(开启底部加载中动画)
      this.loading = true;
      //3.重新请求数据
      this.onLoad();
      //4.关闭上拉刷新动画（如果不写，上面的上拉刷新动画会一直转圈）
      // this.isLoading = false
      this.refreshing = false;
    },
  },
  /* 过滤器 */
  filters: {
    fromNow(value) {
      // console.log(value);
      return moment(value).fromNow();
    },
  },
};
</script>

<style lang="less">
.company {
  background: #fff;
  padding: 0 14px;
  height: 100%;
  .top {
    display: inline-block;
    width: 100%;
    height: 54px;
    line-height: 54px;
    .myname {
      font-size: 18px;
      font-weight: 600;
    }

    .van-search {
      padding-right: 0px;

      .van-search__content.van-search__content--round {
        padding-left: 50px;
      }
    }
  }
  // 轮播图
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    height: 150px;
    img {
      height: 100%;
      width: 100%;
    }
  }
  // 导航栏及筛选下拉框
  .van-row {
    // 导航栏
    .van-col.van-col--5 {
      .van-button {
        width: 100%;
        border: 0;
        height: 48px;
        line-height: 48px;
        justify-items: center;
        background-color: #fff;
        &.iconcolor {
          color: red;
        }
        .van-button__content {
          width: 45px;
          .van-icon:before {
            font-size: 1px;     
          }
        }
      }
    }
    // 筛选栏
    .van-dropdown-menu {
      border: 0;
      .van-cell__title {
        span {
          font-weight: 700;
          font-size: 16px;
        }
      }
      // 距离筛选的左右布局
      .van-col.van-col--11 {
        text-align: center;
        button {
          width: 100%;
          border: 0;
          padding: 5px;
          border-radius: 5px;
        }
        .active {
          color: red;
          background-color: #ffe2e9;
          border: 1px solid red;
        }
      }
      .btn {
        text-align: center;
        button {
          width: 100%;
          border: 0;
          padding: 5px;
          color: red;
          background-color: #ffe2e9;
          border-radius: 5px;
          &:active {
            color: #fff;
            background-color: red;
            border: 1px solid red;
          }
        }
      }
    }
  }

  // 公司卡片选项
  .box {
    position: relative;
    border-bottom: 1px solid #ccc;
    .grade {
      position: absolute;
      top: 0;
      right: 0;
      margin-top: 15px;
      margin-right: 15px;
      color: #545671;
      font-size: 12px;
    }
    .van-card {
      background-color: #fff;
      img.van-image__img {
        width: 65px;
        height: 65px;
        margin-top: 10px;
      }
      .van-card__title.van-multi-ellipsis--l2 {
        padding-top: 10px;
        font-size: 18px;
        font-weight: 600;
      }
      .van-card__desc.van-ellipsis {
        height: 26px;
        line-height: 26px;
        padding: 10px;
      }
      span.van-tag.van-tag--default {
        margin: 0 4px;
        font-size: 12px;
        color: #aaa;
        padding: 3px 7px;
      }
      .tagjob {
        padding: 4px 0;
        color: #ccc;
        .number {
          color: #76d8e7;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
